<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/index1.css">
</head>
<body>
	<div class="content-m">
		<div class="content">
			<div class="position clearfix">
				<label for="position">我申请的职位：</label>
				<ul class="clearfix">
					<li>
						<a href="#">php</a>
					</li>
					<li class="">
						<a href="#">前端</a>
					</li>
					<li>
						<a href="#">UI</a>
					</li>
					<li>
						<a href="#">人事</a>
					</li>
					<li class="last">
						<a href="#">销售</a>
					</li>
				</ul>
			</div>
			<div class="technology clearfix">
				<label for="technology">我掌握的技术：</label>
				<ul class="clearfix">
					<li>
						<a href="#">php</a>
					</li>
					<li>
						<a href="#">javascript</a>
					</li>
					<li>
						<a href="#">css</a>
					</li>
					<li>
						<a href="#">html</a>
					</li>
					<li class="last">
						<a href="#">nodejs</a>
					</li>
				</ul>
			</div>
			<button class="submit">点击提交</button>
		</div>
	</div>
	<div class="content-b">
		<div class="dialog">
			<div class="content">
				<a href="#" class="off">x</a>
				<h4>localhost：8080显示：</h4>
				<p>我申请的职位是<span id="position"></span>,我掌握的技术是<span id="technology"></span></p>
				<button>确定</button>
			</div>
		</div>
	</div>
	<script src="js/jquery-1.12.4.js"></script>
	<script>
		$(function(){
			$('.position>ul>li').click(function(){
				$(this).addClass('active').siblings().removeClass('active');
			})
			$('.technology>ul>li').click(function(){
				if ($(this).hasClass('active')) {
					$(this).removeClass('active');
				}else{
					$(this).addClass('active');
				}
			});
			$('.submit').click(function(){
				$('.dialog').fadeIn();
				var ctx=$('.position .active').find('a').text();
				var	ct="";
  				$(".technology .active a").each(function(){
  					if($(this).hasClass){
  						ct+=","+$(this).text();
  						if(ct.substr(0,1)==','){
  							ct=ct.substr(1);
  						}
  					}			
  				});	
				$('#position').text(ctx);
				$('#technology').text(ct);
			})
			$('.off').click(function(){
				$('.dialog').fadeOut();
			});
		});
	</script>
</body>
</html>